<template>
  <div>
    <a-card :bordered="false">
      <div style="margin-bottom: 20px" class="dib">
        <h3 style="margin-left: 8px">进度-概览</h3>
      </div>

      <a-row type="flex" justify="space-around" align="middle" v-model="pnodes">
        <a-col :span="6">
          <div>
            <a-steps :current="0" labelPlacement="vertical" style="margin-bottom: 35px">
              <a-step
                :title="pnodes[0].status|statusfilter"
                :description="pnodes[0].name"
                @mouseover="hovertips(pnodes[0].ptips,0)"
                @mouseout="hovertipsOut()"
              />
              <a-step title description style="visibility: hidden;" />
            </a-steps>

            <a-steps :current="0" labelPlacement="vertical">
              <a-step
                :title="pnodes[1].status|statusfilter"
                :description="pnodes[1].name"
                @mouseover="hovertips(pnodes[1].ptips,1)"
                @mouseout="hovertipsOut()"
              />
              <a-step title description style="visibility: hidden;" />
            </a-steps>
            <div class="borderVer"></div>
          </div>
        </a-col>
        <a-col :span="18" class="col18">
          <div>
            <a-steps
              :current="currentindex"
              direction="horizontal"
              labelPlacement="vertical"
              v-model="pnodes"
            >
              <a-step
                :title="item.status|statusfilter"
                :description="item.name"
                @mouseover="hovertips(pnodes[index+2].ptips,index+2)"
                @mouseout="hovertipsOut()"
                v-for="(item, index) in pnodes.slice(2)"
                :key="index+2"
              />
            </a-steps>
            <!-- <a-steps :current="currentindex" labelPlacement="vertical">
              <a-step title="description" style="display:none" />
              <a-step
                :title="pnodes[2].status|statusfilter"
                :description="pnodes[2].name"
                @mouseover="hovertips(pnodes[2].ptips,2)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[3].status|statusfilter"
                :description="pnodes[3].name"
                @mouseover="hovertips(pnodes[3].ptips,3)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[4].status|statusfilter"
                :description="pnodes[4].name"
                @mouseover="hovertips(pnodes[4].ptips,4)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[5].status|statusfilter"
                :description="pnodes[5].name"
                @mouseover="hovertips(pnodes[5].ptips,5)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[6].status|statusfilter"
                :description="pnodes[6].name"
                @mouseover="hovertips(pnodes[6].ptips,6)"
                @mouseout="hovertipsOut()"
              />
              <a-step
                :title="pnodes[7].status|statusfilter"
                :description="pnodes[7].name"
                @mouseover="hovertips(pnodes[7].ptips,7)"
                @mouseout="hovertipsOut()"
              />
            </a-steps>-->
            <div class="borderHaz"></div>
          </div>
        </a-col>
        <!-- 悬浮弹窗 -->
        <div
          class="titps"
          v-if="clickt&&tipsContent.length!=0"
          :tipsContent="tipsContent"
          :style="{ left: `${left}px`,bottom: `${bottom}px`,}"
        >
          <p>
            {{tipsContent[0].key}}
            <i>{{tipsContent[0].value}}</i>
          </p>
          <p>
            {{tipsContent[1].key}}
            <i>{{tipsContent[1].value}}</i>
          </p>
        </div>
        <div
          class="titps"
          :tipsContent="tipsContent"
          v-else-if="clickt&&tipsContent==0"
          :style="{ left: `${left}px`,bottom: `${bottom}px`,}"
        >
          <h3 style="text-align: center;margin-top: 10px;">暂无信息</h3>
        </div>
        <!--  -->
      </a-row>
    </a-card>

    <a-card :bordered="false" style="margin-top:10px">
      <div style="margin-bottom: 16px">
        <h3 style="margin-left: 8px">进度-明细</h3>
      </div>
      <s-table
        ref="table"
        size="small"
        :columns="columns"
        :data="loadData"
        :showAlertInfo="false"
        @onSelect="onChange"
      ></s-table>
    </a-card>
  </div>
</template>

<script>
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import axios from 'axios'
import { getRoleList, kaProgressDetail, getAction, kaProgressView } from '@/api/manage'
export default {
  name: 'AnalysisFirst',
  components: {
    AInput,
    ATextarea,
    STable
  },
  data() {
    return {
      // showAlertInfo:false,//showAlertInfo
      left: 140,
      bottom: 3,
      buttonWidth: 70,
      clickt: false,
      visibleCreateModal: false,
      form: null,
      mdl: {},
      url: {
        getsteps: '/api/pms/kpiView'
      },
      currentindex: 0,
      pnodes: [],
      tipsContent: null,
      // 高级搜索 展开/关闭
      advanced: true,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [],
      // columns: [
      //   {
      //     title: '各部门和单位（总填报数量/完成填报数量）',
      //     dataIndex: 'no',
      //     width: 150
      //   },
      //   {
      //     title: '收入',
      //     width: 100,
      //     dataIndex: 'description'
      //   },
      //   {
      //     title: '净利润',
      //     dataIndex: 'callNo',
      //     sorter: false,
      //     needTotal: true,
      //     width: 100
      //     // customRender: (text) => text + ' 次'
      //   },
      //   {
      //     title: '状态',
      //     dataIndex: 'status',
      //     width: 100,
      //     needTotal: true
      //   },
      //   {
      //     title: '净新增达成率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '独立区健康评估按时完成率（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '独立区年度体检完成率（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '入住合同签署完整率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: 'TK-LTC体系执行符合率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: 'TKR体系执行符合率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '养康客户满意度（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '康复医院门诊病历书写合格率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '康复医院甲级病案率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '养康净推荐值ＮＰＳ（独立区）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '净推荐值ＮＰＳ（护理区+康复医院）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '全景及专项计划',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '关键信息正确率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '独立区跌倒致重伤发生率（联考）',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '主流客户占比',
      //     width: 100,
      //     dataIndex: 'status',
      //     sorter: false
      //   },
      //   {
      //     title: '院感',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '平均入住率',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   },
      //   {
      //     title: '总计',
      //     dataIndex: 'status',
      //     width: 100,
      //     sorter: false
      //   }
      //   // {
      //   //   table: '操作',
      //   //   dataIndex: 'action',
      //   //   width: '150px',
      //   //   scopedSlots: { customRender: 'action' },
      //   // }
      // ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return kaProgressDetail(`${window._CONFIG['domianURL']}`).then(res => {
          if (res.code == 200) {
            this.columns = res.result.items
            return res.result.values
          }
        })
      },

      // selectedRowKeys: [],
      selectedRows: []
    }
  },
  created() {
    // getRoleList({ t: new Date() })
    // getAction(this.url.getsteps).then(res => {
    //   //获取接口数据
    //   this.pnodes = res.data
    // })
    // 进度-概览
    kaProgressView(`${window._CONFIG['domianURL']}`).then(res => {
      if (res.code == 200) {
        this.pnodes = res.result.pnodes
      }
    })
    // this.pnodes = [
    //   {
    //     name: '双向评分',
    //     code: 'twoWayScore',
    //     pseq: '1', //节点编号
    //     status: 'finished', //ongoing-进行中; finished-已完成; waiting-待进行
    //     todoUrl: '', //点击跳转页面
    //     ptips: [
    //       {
    //         key: '一线单位评分率:',
    //         value: '80%'
    //       },
    //       {
    //         key: '本部部门评分率:',
    //         value: '80%'
    //       }
    //     ]
    //   },
    //   {
    //     name: '绩效填报',
    //     code: 'performanceReporting',
    //     pseq: '1',
    //     status: 'finished',
    //     todoUrl: '',
    //     ptips: [
    //       {
    //         key: '一线单位填报率:',
    //         value: '100%'
    //       },
    //       {
    //         key: '本部部门填报率:',
    //         value: '90%'
    //       }
    //     ]
    //   },
    //   {
    //     name: '汇总评分',
    //     code: 'summaryScore',
    //     pseq: '2',
    //     status: 'finished',
    //     todoUrl: '',
    //     ptips: [
    //       {
    //         key: '一线单位评分率:',
    //         value: '100%'
    //       },
    //       {
    //         key: '本部部门评分率:',
    //         value: '100%'
    //       }
    //     ]
    //   },
    //   {
    //     name: '总经理评分',
    //     code: 'gmScore',
    //     pseq: '3',
    //     status: 'ongoing',
    //     todoUrl: '',
    //     ptips: [
    //       {
    //         key: '一线单位评分率:',
    //         value: '80%'
    //       },
    //       {
    //         key: '本部部门评分率:',
    //         value: '45%'
    //       }
    //     ]
    //   },
    //   {
    //     name: '提交审核申请',
    //     code: 'auditApplication',
    //     pseq: '4',
    //     status: 'waiting',
    //     todoUrl: '',
    //     ptips: []
    //   },
    //   {
    //     name: '绩效审核通过',
    //     code: 'auditPass',
    //     pseq: '5',
    //     status: 'waiting',
    //     todoUrl: '',
    //     ptips: []
    //   },
    //   {
    //     name: '生成绩效报表',
    //     code: 'calcuPerformance',
    //     pseq: '6',
    //     status: 'waiting',
    //     todoUrl: '',
    //     ptips: []
    //   },
    //   {
    //     name: '绩效完成(2019年12月)',
    //     code: 'donePerformance',
    //     pseq: '7',
    //     status: 'waiting',
    //     todoUrl: '',
    //     ptips: []
    //   }
    // ]
  },
  // mounted(){
  //    // 进度-概览
  //   kaProgressView(`${window._CONFIG['domianURL']}`).then((res) => {
  //         debugger
  //       if (res.success) {
  //         this.dataSource = res.result.records;
  //         this.ipagination.total = res.result.total;
  //       }
  //     })
  // },
  filters: {
    statusfilter: function(value) {
      switch (value) {
        case 'ongoing':
          return '进行中'
          break
        case 'finished':
          return '已完成'
          break
        case 'waiting':
          return '待进行'
          break
        default:
          return ''
          break
      }
    }
  },
  methods: {
    hovertips(val, boll) {
      this.clickt = true
      this.tipsContent = val
      switch (boll) {
        case 0:
          this.left = 150
          break
        case 1:
          this.left = 150
          break
        case 2:
          this.left = 150 * boll
          break
        case 3:
          this.left = 150 * boll
          break
        case 4:
          this.left = 150 * boll
          break
        case 5:
          this.left = 150 * boll
          break
        case 6:
          this.left = 150 * boll
          break
        case 7:
          this.left = 150 * boll
          break
        default:
          break
      }
    },
    hovertipsOut() {
      this.clickt = false
    },
    // handleCreateModalOk() {
    //   this.createForm.validateFields((err, fieldsValue) => {
    //     if (err) {
    //       return
    //     }
    //     const description = this.createForm.getFieldValue('description')
    //     axios
    //       .post('/saveRule', {
    //         desc: description
    //       })
    //       .then(res => {
    //         this.createForm.resetFields()
    //         this.visibleCreateModal = false
    //         this.loadRuleData()
    //       })
    //   })
    // },
    onChange(row) {
      // this.selectedRowKeys = row.selectedRowKeys
      this.selectedRows = row.selectedRows

      console.log(this.$refs.table)
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
    pnodes: function(params) {
      params.forEach(element => {
        if (element.status == 'ongoing') {
          this.currentindex = element.pseq - 2
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>